<template>
  <div class="exchange-rate-settings">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>汇率管理</span>
        </div>
      </template>
      
      <el-form :model="rateForm" label-width="120px">
        <el-form-item label="当前汇率">
          <div class="current-rate">
            <span class="rate-value">{{ currentRate }}</span>
            <el-tag type="success" size="small">实时汇率</el-tag>
          </div>
        </el-form-item>
        
        <el-form-item label="设置新汇率">
          <el-input-number 
            v-model="rateForm.newRate" 
            :precision="4" 
            :step="0.0001" 
            :min="0.001" 
            :max="1"
            style="width: 200px;"
            placeholder="请输入新汇率"
          />
          <el-button type="primary" @click="updateRate" style="margin-left: 12px;">
            更新汇率
          </el-button>
        </el-form-item>
        
        <el-form-item label="汇率历史">
          <el-table :data="rateHistory" border style="width: 100%;">
            <el-table-column prop="rate" label="汇率" width="120" />
            <el-table-column prop="timestamp" label="更新时间" width="200">
              <template #default="{ row }">
                {{ new Date(row.timestamp).toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="operator" label="操作人" width="120" />
          </el-table>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>联动效果测试</span>
        </div>
      </template>
      
      <div class="test-section">
        <h4>当前汇率下的手续费计算：</h4>
        <p>汇率：{{ currentRate }}</p>
        <p>手续费：{{ calculatedFee }}円</p>
        
        <el-divider />
        
        <h4>测试说明：</h4>
        <ol>
          <li>在上方设置新的汇率</li>
          <li>点击"更新汇率"按钮</li>
          <li>观察手续费是否自动更新</li>
          <li>切换到会员列表页面，查看汇率显示是否更新</li>
        </ol>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { exchangeRateService } from '@/services/exchangeRateService'

const rateForm = ref({
  newRate: 0.052
})

// 当前汇率
const currentRate = computed(() => exchangeRateService.getCurrentRate())

// 计算的手续费
const calculatedFee = computed(() => exchangeRateService.calculateServiceFee())

// 汇率历史
const rateHistory = computed(() => exchangeRateService.getRateHistory())

// 更新汇率
function updateRate() {
  try {
    const newRate = rateForm.value.newRate.toString()
    exchangeRateService.setRate(newRate, '管理员')
    ElMessage.success('汇率更新成功')
    
    // 重置表单
    rateForm.value.newRate = parseFloat(newRate)
  } catch (error) {
    ElMessage.error(error instanceof Error ? error.message : '汇率更新失败')
  }
}

onMounted(() => {
  // 初始化表单
  rateForm.value.newRate = parseFloat(currentRate.value)
})
</script>

<style scoped>
.exchange-rate-settings {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current-rate {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rate-value {
  font-size: 24px;
  font-weight: 600;
  color: #409eff;
}

.test-section {
  padding: 16px;
}

.test-section h4 {
  margin: 16px 0 8px 0;
  color: #303133;
}

.test-section p {
  margin: 8px 0;
  color: #606266;
}

.test-section ol {
  margin: 8px 0;
  padding-left: 20px;
}

.test-section li {
  margin: 4px 0;
  color: #606266;
}
</style> 